<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!--<link href="../css/mui.indexedlist.css" rel="stylesheet" />-->
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.mui-table-view-cell:after {
				background-color: #E2E2E4;
			}
		</style>
	</head>

	<body>
		<!--<div class="mui-content">-->
		<div>
			<ul class="mui-table-view" id="list">

			</ul>
		</div>
		<!--</div>-->
		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/mui.min.js"></script>
		<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="listTem">
			{{each}}
			<li data-value="parent" class="mui-table-view-divider mui-indexed-list-group">{{$value.name}}</li>
			{{if $value.subcate}} {{each $value.subcate as v i}}
			<li data-value="{{v.id}}" class="mui-table-view-cell mui-indexed-list-item">{{v.name}}</li>
			{{/each}} {{/if}} {{/each}}

		</script>
		<!--<script src="../js/mui.indexedlist.js"></script>-->
		<script type="text/javascript" charset="utf-8">
			apiready = function() {
				function success(ret) {
					if (ret.code == 200) {
						var html = template("listTem", ret.data);
						document.getElementById("list").innerHTML = html;
						hideWaiting();
					}
				}
				var url = MYAPP.webroot + "/api/index.php/Home/Index/getcategory/";
				showWaiting("稍等一下哦!");
				api.ajax({
					url: url,
					method: 'get',
					timeout: 30,
					dataType: 'json',
					returnAll: false
				}, function(ret, err) {
					if (ret) {
						success(ret);
					} else {
						api.toast({
							msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
							location: 'middle',
							duration: 1000
						});
					}
				});
				mui('#list').on('tap', 'li', function() {
					var cid = this.getAttribute('data-value');
					var name = this.innerHTML;
					if (cid == "parent") {
						return false;
					} else {
						localStorage.setItem("cid", cid);
						localStorage.setItem("cname", name);
						var data = {
							id: cid
						};
						api.openWin({
							name: 'selectcourse',
							url: 'selectcourse.html',
							pageParam: data
						});
						//						api.toast({
						//							msg:"已选择科目："+name,
						//							location:'middle'
						//						});
						//						api.sendEvent({
						//						    name: 'cidSelected',
						//						    extra: {cid:cid, cname:name}
						//						});
						//						setTimeout('api.closeWin()',1000);
						api.addEventListener({
							name: 'courseSelected'
						}, function(ret, err) {
							api.closeWin();
						});
					}
				});
				//				document.getElementById("list").addEventListener('tap','li',function(){
				//					
				//				})
			}
		</script>
	</body>

</html>